<template>
	<view id="reservation">
		<view v-if="myApplyList.length!==0">
			<mescroll-uni :down="downOption" @down="downCallback" :up="upOption">
				<view v-for="item in myApplyList" :key="item.id">
					<view class="text-center text-lg padding-tb">{{filterDate(item.created_at)}}</view>
					<!-- 列表 -->
					<view class="cu-list menu sm-border">
						<view class="cu-item">	
							<view class="content">
								<text>预约编号：{{item.id}}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content">	
								<text>课程名称：{{!item.course.course_name?'未知':item.course.course_name}}</text>
							</view>
						</view> 
						<view class="cu-item">
							<view class="content">
								<text>老师名称：{{!item.course.teacher.teacher_name?'未知':item.course.teacher.teacher_name}}</text>
							</view>
						</view>
						<view class="cu-item">
							<view class="content flex justify-between">
								<text class="text-orange" v-if="item.check_status==0">预约时间：{{item.apply_date}}</text>
								<text class="text-green" v-else-if="item.check_status==1">预约时间：{{item.apply_date}}</text>
								<!-- <text class="text-erd" v-else>预约时间：{{item.apply_date}}</text> -->
								<text class="text-orange" v-if="item.check_status==0">预约成功</text>
								<text class="text-green" v-else-if="item.check_status==1">已到店</text>
								<!-- <text clas="text-erd" v-else>预约失败</text> -->
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		
		<!-- 缺省图 -->
		<view class="text-center" v-else>
			<image src="/static/image/queshengtu.svg" mode="aspectFill" style="width:300upx;height:300upx;"></image>
			<view class="padding-top-sm">~ 空空如也 ~</view>
		</view>
	</view>
</template>
  
<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";	//下拉刷新上拉加载组件
	import {mapState} from 'vuex'
	
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					use: false
				}
			};
		},
		onLoad() {
			uni.showNavigationBarLoading()
			
			// 我的预约
			this.getmyApply()
		},
		methods: {
			/*下拉刷新的回调 */
			async downCallback(mescroll) {
				console.log('下拉刷新了', mescroll);
				
				let res = await this.$api.myApply()
				if(res.statusCode === 200){
					mescroll.endSuccess()
					
					console.log('我的预约', res.data.data)
					
					this.$store.dispatch('sendMyApply', res.data.data)
				}
			},
			// 我的预约
			async getmyApply(){
				let res = await this.$api.myApply()
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('我的预约', res.data.data)
					
					this.$store.dispatch('sendMyApply', res.data.data)
				}
			},
		},
		computed: {
			...mapState(['myApplyList']),
			filterDate(){
				return function(cDate){
					cDate = cDate.replace(/-/g, '/')
					var date = new Date(cDate)
					var mouth = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);//月
					var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());//日
					var hour= (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());//时
					var minute = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());//分
					return mouth+'月'+day+'日'+' '+hour+':'+minute
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
